<template>
    <div id="market">
      <div id="tradingKLine" style="width:100vw;height:100vh"></div>
      <a id="selectBtn" @click="onSelectClick">选择货币对</a>


      <el-drawer title="选择货币对"  :visible.sync="selectShow"    size="230px" :with-header="false">
        <div style="background:#181C27;width:100%;height:100%;display:flex;flex-direction:column">
          <div style="width:220px;margin:10px 5px;">
              <el-input v-model="searchValue" placeholder="搜索" @input="searchInput()"></el-input>
          </div>
            <div class="symbol-list">
              <el-table
                :data="filteredSymbols"
                :show-header="false"
                :border="false"
                empty-text="无匹配数据"
                style="width: 100%">
                <el-table-column
                  prop="value">
                  <template slot-scope="scope">
                    <a style="cursor:pointer;color:#aaa;font-size:15px;width: 100%;display: inline-block;" @click="onSymbolClick(scope.row)">{{scope.row.value.toUpperCase()}}</a>
                </template>
                </el-table-column>
              </el-table>
            </div>

        </div>
      </el-drawer>
    </div>
</template>

<script>
const { ipcRenderer } =  window.require('electron');

String.prototype.endWith = function(endStr){
	var d = this.length-endStr.length;
	return (d >= 0 && this.lastIndexOf(endStr) == d)
}


export default {
  name: 'Home',
 data(){
   return {
     selectShow:false,
     searchValue:'',
     defaultSymbol:'btcusdt',
     symbols:[],
     filteredSymbols:[],
     formatSymbols:[]
   }
 },
 methods:{
   onSymbolClick(row){
     this.selectShow = false;
     this.renderKLine(row.value);
   },
  searchInput(){
    this.filteredSymbols = [];
    if(this.searchValue.length == 0){
      this.filteredSymbols = this.symbols;
      return;
    }
    for(let i in this.symbols){
      if(this.symbols[i].value.indexOf(this.searchValue.toLowerCase()) >=0){
        this.filteredSymbols.push(this.symbols[i]);
      }
    }


  },
    onSelectClick(){
      this.selectShow = true;
    },
     loadSymbol(){
      this.symbols = [];
      this.filteredSymbols = [];
      // this.formatSymbols = [];
     ipcRenderer.once('listSymbol-res',(event,list)=>{
          console.log('listSymbol-res',list)
           for(let i in list){
              let symbol = list[i].symbol;
              let item = {hidde:false,value:symbol};
              this.symbols.push(item)
              this.filteredSymbols.push(item);
              // this.formatSymbols.push('HUOBI:'+symbol.toUpperCase());
            }
        });
      ipcRenderer.send('listSymbol');
  
    },
    renderKLine(symbol){
      new TradingView.widget(
                  {
                  "autosize": true,
                  "symbol": "HUOBI:" + symbol.toUpperCase(),
                  "interval": "D",
                  "timezone": "Asia/Shanghai",
                  "theme": "dark",
                  "style": "1",
                  "locale": "zh_CN",
                  "toolbar_bg": "#f1f3f6",
                  "enable_publishing": false,
                  "hide_side_toolbar": false,
                  "watchlist": [],
                  "details": true,
                  "calendar": true,
                  "container_id": "tradingKLine"
                }
      );
    }
 },
 mounted(){
   this.loadSymbol();
   this.renderKLine(this.defaultSymbol);
   
 }
};
</script>

<style lang="less">
#market{
  #selectBtn{
    position:fixed;
    right:6px;
    top:50%;
    margin-top:-60px;
    width:30px;
    height:120px;
    padding:5px;
    cursor:pointer;
    background:#409EFF;
    color:#fff;
    border-radius:5px;
    text-align:center;
  }  
  .el-table__row{
    background: #181C27;
  }
  .el-table td, .el-table th.is-leaf {
    border-bottom: none;
}
  .el-drawer__body{
    overflow-y: auto;
  }
  .symbol-list{
    flex:1;
    overflow-y:auto;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    color:#28968C;
    background-color: #344D53 ;
  }

}
body{
  background:#181C27;
}

  ::-webkit-scrollbar{width:10px;height:8px;}
  ::-webkit-scrollbar-button{width:10px;height:8}
  ::-webkit-scrollbar-track{background:0 0}
  ::-webkit-scrollbar-thumb{background:#383F66;border-radius:5px}
  ::-webkit-scrollbar-thumb:hover{background-color:#66B1FF}
  ::-webkit-scrollbar-thumb:active{background-color:#17bbaf}
</style>
